<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Evernote</title>
		<link rel="stylesheet" type="text/css" href="${path }/static/css/index.css">
		<link href="${path }/static/css/toastr.min.css" rel="stylesheet">
		
		
	</head>
	<body>
		<div class="left">
			<div class="logo">
				<img alt="logo" src="${path }/static/img/logo.png">
			</div>
			<div class="btn">
				<a id="left_newnote" title="新建笔记">
					<img class="img1" id="img1" alt="新建笔记" src="${path }/static/img/newnotes.png" onmouseover="imgHover()" onmouseout="imgUnhover()" onclick="imgOnClick()">
				</a>
			</div>
			<div class="btn" style="display: none">
				<a title="搜索笔记">
					<img class="img1" id="img2" alt="搜索笔记" src="${path }/static/img/search.png" onmouseover="imgHover()" onmouseout="imgUnhover()" onclick="imgOnClick()">
				</a>
			</div>
			<div id="left_note" class="btn1">
				<a title="笔记">
					<img class="img2" id="img3" alt="搜索笔记" src="${path }/static/img/note2.png" onmouseover="imgHover()" onmouseout="imgUnhover()" onclick="imgOnClick()">
				</a>
			</div>
			<div id="left_notebook" class="btn">
				<a title="笔记本">
					<img class="img2" id="img4" alt="搜索笔记" src="${path }/static/img/notebook.png" onmouseover="imgHover()" onmouseout="imgUnhover()" onclick="imgOnClick()">
				</a>
			</div>
			<div class="user">
				<a class="user_a" title="账户">
					<img src="${path }/static/img/user.png">
				</a>
			</div>
		</div>
		<div class="centre">
			<div class="head">
				<h2>${notebookMsg }</h2>
				<div>
					<span id = "noteNum">${noteNum }条笔记</span>
					<a onclick="toIndex()">所有笔记</a>
				</div>
				<input id="findNote" class="text" type="text" placeholder="查找笔记" oninput="onInput(3)">
			</div>
			<div id="content" class="content">
				<c:forEach items="${clist }" var="c" varStatus="status">
					<div id = "note_id${c.id }" class="note" onclick="onClick('${c.title }', '${c.id }')">
						<span class="title">${c.title }</span>
						<a title="删除" href="" onclick="deleteNote('${c.id}','${c.nid }')"><img class="delete" alt="" src="${path }/static/img/delete_white.png"></a>
						<span class="date">${c.date }</span>
						<span id = "content_span${c.id }" class="text">${c.content }</span>
						<input id = "Cid${c.id }" type="text" value="${c.id }" style="visibility: hidden;">
						<input id = "Nid${c.id }" type="text" value="${c.nid }" style="visibility: hidden;">
						<input id = "Uid${c.id }" type="text" value="${c.uid }" style="visibility: hidden;">
					</div>
				</c:forEach>
			</div>
		</div>
		<div class="right">
			<div class="position">
				<div class="head">
					<input id = "right_Cid" type="text" value = "0" style="display: none;">
					<input id = "right_Nid" type="text" value = "${Nid }" style="display: none;">
					<input id = "right_Uid" type="text" value = "${Uid }" style="display: none;">
					<a onclick="getContent()">提交</a>
				</div>
				<div class="toolbar_title">
					<a id="movenote" title="移动笔记">
						<img alt="" src="${path }/static/img/notebook_small.png">
						<span id="notebook_name">${name }</span>
						<img alt="" src="${path }/static/img/downArrow.png">
					</a>
					<!-- 弹窗2 -->
					<div class="notebookOption">
						<div class="head">
							<input id="findNoteBook1" class="text" type="text" placeholder="查找笔记本" oninput="onInput(1)">
						</div>
						<div class="middle">
							<div>
								<a class="newnotebook_a" id="newnotebook_a" onmouseover="imgHover()" onmouseout="imgUnhover()">
									<img class="newnotebook_img" id="newnotebook_img" alt="" src="${path }/static/img/newnotebook.png">
									<span id="newnotebook_span" onmouseover="imgHover()" onmouseout="imgUnhover()">创建新笔记本</span>
								</a>
							</div>
							<c:forEach items="${nlist }" var="n">
								<div id="notebookName${n.id }" class="notebookName" onclick="changeNotebook('${n.id}')" onmouseover="imgHover()" onmouseout="imgUnhover()">
									<input id = "notebookName_Nid${n.id }" type="text" value = "${n.id }" style="display: none;">
									<span id = "notebookName_span${n.id }" onmouseover="imgHover()" onmouseout="imgUnhover()">${n.name }</span>
									<img id = "notebookName_img${n.id }" alt="" src="" onmouseover="imgHover()" onmouseout="imgUnhover()">
								</div>
							</c:forEach>
						</div>
					</div>
				</div>
				
				<!-- <div id = "editor"></div> -->
				<div id="text_toolbar" class="text_toolbar"></div>
				<div class="title">
					<input id="title_input" type="text" placeholder="写下笔记标题" >
				</div>
				<div id="text" class="text"> <!--可使用 min-height 实现编辑区域自动增加高度-->
			        
			    </div>
			</div>
		</div>
		
		<!-- 弹窗1 -->
		<div class="userinfo">
			<div class="position">
				<div>
					<input class="btn" type="button" value="探索更多选择">
				</div>
				<div>
					<a href="">
						<img title="换一张照片" class="user_pportrait" alt="" src="${path }/static/img/user.png">
					</a>
					<span class="username">${username }</span>
				</div>
				<div class="option">
					<a href="">
						<img alt="" src="${path }/static/img/set.png">
						<span>设置</span>
					</a>
					<a href="">
						<img alt="" src="${path }/static/img/download.png">
						<span>下载 Windows版</span>
					</a>
					<a href="">
						<img alt="" src="${path }/static/img/guide.png">
						<span>使用指南</span>
					</a>
					<a href="">
						<img alt="" src="${path }/static/img/feedback.png">
						<span>使用反馈</span>
					</a>
					<a href="#" onclick="window.location = 'ToDemo'">
						<img alt="" src="${path }/static/img/exit.png">
						<span>退出登陆</span>
					</a>
				</div>
			</div>
		</div>
		<!-- 弹窗3 -->
		<div class="newnotebook">
			<div class="position">
				<input id = "newnotebook_id" type="text" value = "${Uid }" style="display: none;">
				<img alt="" src="${path }/static/img/newnotebook_gray.png">
				<span>创建笔记本</span>
				<hr style="width: 20%; display: block; margin: 0 auto; color: rgb(163,163,163); cursor: default;">
				<input id="newnotebook_input" type="text" placeholder="给笔记本起个名称">
				<a class="cancel"><span>取消</span></a>
				<a class="create" onclick="newNotebook()"><span>创建笔记本</span></a>
			</div>
		</div>
		
		<!-- 弹窗4 -->
		<div class="notebook">
			<div class="head">
				<div>
					<span>笔记本</span>
					<img title="创建笔记本" id="newnotebook" alt="" src="${path }/static/img/newnotebook.png">
				</div>
				<input id="findNoteBook2" class="text" type="text" placeholder="查找笔记本" oninput="onInput(2)">
			</div>
			<div class="middle">
				<c:forEach items="${nlist }" var="n">
					<div id="noteBookName${n.id }">
						<div id="notebookName${n.id }" class="notebookName" onclick="selectNotebook('${n.id}')" onmouseover="imgHover()" onmouseout="imgUnhover()">
							<input id = "notebookName_Nid${n.id }" type="text" value = "${n.id }" style="display: none;">
							<span id = "notebookName_span${n.id }" onmouseover="imgHover()" onmouseout="imgUnhover()">${n.name }</span>
							<span>${n.num }条笔记</span>
						</div>
						<a title="删除" href="" onclick="delectNotebook(${n.id})">
							<img id="delete_img${n.id }" onmouseover="imgHover('${n.id}')" onmouseout="imgUnhover('${n.id}')" class="delete" alt="" src="${path }/static/img/delete_white.png">
						</a>
					</div>
				</c:forEach>
			</div>
		</div>
		
	</body>
	<script src="${path }/static/js/jquery.min.js"></script>
	<script src="${path }/static/js/toastr.min.js"></script>
	<!-- 弹窗 -->
    <script src="${path }/static/js/jquery.min.js"></script>
	<script>
		jQuery(document).ready(function($) {
			
			//弹窗1
			$(".user_a").click(function(){
                $(".userinfo").show(300);
                return false;//关键是这里，阻止冒泡
            });
            $(".userinfo").click(function(){
                return false;
            });
			$(document).click(function(){
                $(".userinfo").hide(300);
            });
			//弹窗2
			$("#movenote").click(function() {
				$(".notebookOption").show(300);
				return false;
			});
			$(".notebookOption").click(function() {
				return false;
			});
			$(document).click(function() {
				$(".notebookOption").hide(300);
			});
			//弹窗3
			$("#newnotebook_a").click(function() {
				$(".newnotebook").show(300);
				return false;
			});
			$("#newnotebook").click(function() {
				$(".newnotebook").show(300);
				return false;
			});
			$(".newnotebook").click(function() {
				return false;
			});
			$(".cancel").click(function() {
				$(".newnotebook").hide(300);
			});
			//弹窗4
			$("#left_note").click(function() {
				$(".centre").show(300);
				return false;
			});
			$(".centre").click(function() {
				return false;
			});
			$("#left_newnote").click(function() {
				$(".centre").hide(300);
				if(select != null && select != "") {
					document.getElementById(select).className = "note";
					isFirst = true;
				}
				$("#right_Cid").attr("value", "0");
				//$("#right_Nid").attr("value", "${Nid}");
				$("#right_Uid").attr("value", "${Uid}");
				$("#title_input").val("");
				editor1.txt.clear();
			});
			
			$("#left_notebook").click(function() {
				$(".notebook").show(300);
				return false;
			});
			$(".notebook").click(function() {
				return false;
			});
			$(document).click(function() {
				$(".notebook").hide(300);
				document.getElementById("img4").src = "${path}/static/img/notebook.png";
			});
		})
	</script>
	
	<!-- 富文本编辑器 -->
	<script type="text/javascript" src="${path }/static/js/wangEditor.js"></script>
	<script type="text/javascript">
        //var E = window.wangEditor
        //var editor = new E('#editor')
        // 或者 var editor = new E( document.getElementById('editor') )
        //editor.create()
        
        var E = window.wangEditor;
        var editor1 = new E('#text_toolbar', '#text'); // 两个参数也可以传入 elem 对象，class 选择器

		editor1.customConfig.menus = [ 
	        //'head', // 标题
			'bold', // 粗体
			'fontSize', // 字号
			'fontName', // 字体
			'italic', // 斜体
			'underline', // 下划线
			'strikeThrough', // 删除线
			'foreColor', // 文字颜色
			//'backColor', // 背景颜色
			//'link', // 插入链接
			//'list', // 列表
			//'justify', // 对齐方式
			//'quote', // 引用
			//'emoticon', // 表情
			//'image', // 插入图片
			//'table', // 表格
			//'video', // 插入视频
			//'code', // 插入代码
			'undo', // 撤销
			'redo' // 重复
		]
		editor1.create();
        
        function getContent() {
        	var Cid = document.getElementById("right_Cid").value;
        	var Nid = document.getElementById("right_Nid").value;
        	var Uid = document.getElementById("right_Uid").value;
        	var title = document.getElementById("title_input").value;
        	//var content = editor1.txt.html();
        	var content = editor1.txt.text();
        	var mydate = new Date();
        	var date = mydate.toLocaleDateString();
        	
        	if(title == "" || title == null) {
        		title = "无标题";
        	}
        	//content = html_encode(content);
        	var params = {
			        "id":Cid,
			        "Nid":Nid,
			        "Uid":Uid,
			        "title":title,
			        "content":content,
			        "date":date
			    };
			post("DoAddNote", params);
        }
        
      	
		//发送POST请求跳转到指定页面
		function post(URL, PARAMS) {
			var temp = document.createElement("form");
			temp.action = URL;
			temp.method = "post";
			temp.style.display = "none";

			for ( var x in PARAMS) {
				var opt = document.createElement("textarea");
				opt.name = x;
				opt.value = PARAMS[x];
				temp.appendChild(opt);
			}
			document.body.appendChild(temp);
			temp.submit();
			return temp;
		}

		function html_encode(str) {
			var s = "";
			if (str.length == 0)
				return "";
			s = str.replace(/&/g, "&gt1;");
			s = s.replace(/</g, "&lt;");
			s = s.replace(/>/g, "&gt;");
			s = s.replace(/ /g, "&nbsp;");
			s = s.replace(/\'/g, "&#39;");
			s = s.replace(/\"/g, "&quot;");
			s = s.replace(/\n/g, "<br>");
			return s;
		}

		function html_decode(str) {
			var s = "";
			if (str.length == 0)
				return "";
			s = str.replace(/&gt1;/g, "&");
			s = s.replace(/&lt;/g, "<");
			s = s.replace(/&gt;/g, ">");
			s = s.replace(/&nbsp;/g, " ");
			s = s.replace(/&#39;/g, "\'");
			s = s.replace(/&quot;/g, "\"");
			s = s.replace(/<br>/g, "\n");
			return s;
		}
	</script>
	
	<script type="text/javascript">
		var msg = '${msg}';
		if(msg == "登录成功" || msg == "提交成功" || msg == "创建成功" || msg == "删除成功") {
			$(function() {
            	toastr.success(msg, "success"); // Wire up an event handler to a button in the toast, if it exists
            })
		} else if(msg == "提交失败" || msg == "创建失败" || msg == "删除失败") {
			$(function() {
            	toastr.error(msg, "error"); // Wire up an event handler to a button in the toast, if it exists
            })
		} else if(msg == "该笔记本已存在，请换个名字") {
			$(function() {
				toastr.warning(msg, "error"); // Wire up an event handler to a button in the toast, if it exists
            })
		}
		//用于添加或者修改笔记后显示centre div
		var Cid = '${Cid}';
		if(Cid != "" && Cid != null) {
			select = "note_id" + Cid;
			document.getElementById(select).className += " selected";
			$(".centre").show(300);
		}
		 
		var isNotebookShow = ${isNotebookShow};
		if(isNotebookShow) {
			$(".notebook").show();
		}
		//$(".centre").show();
		//var selectedNid = '${selectedNid}';
		document.getElementById("notebookName_img${selectedNid}").src = "${path}/static/img/selected.png";
		
	</script>
	
	<script type="text/javascript">
		var selectedNid = '${selectedNid}';
		var img1 = false;
		var img2 = false;
		var img3 = true;
		var img4 = false;
		function imgHover() {
			var e = event.srcElement;
			if(e.id == "img1") {
				document.getElementById("img1").src = "${path}/static/img/newnotes1.png";
			} else if(e.id == "img2")	 {
				document.getElementById("img2").src = "${path}/static/img/search1.png";
			} else if(e.id == "img3")	 {
				document.getElementById("img3").src = "${path}/static/img/note1.png";
			} else if(e.id == "img4")	 {
				document.getElementById("img4").src = "${path}/static/img/notebook1.png";
			} else if(e.id == "newnotebook_a" || e.id == "newnotebook_span" || e.id == "newnotebook_img") {
				document.getElementById("newnotebook_img").src = "${path}/static/img/newnotebook_hover.png";
			} else if(e.id == "notebookName"+selectedNid || e.id == "notebookName_span"+selectedNid || e.id == "notebookName_img"+selectedNid) {
				document.getElementById("notebookName_img"+selectedNid).src = "${path}/static/img/selected_hover.png";
			}
		}
		function imgUnhover() {
			var e = event.srcElement;
			if(e.id == "img1") {
				if(img1) {
					document.getElementById("img1").src = "${path}/static/img/newnotes2.png";
				}else {
					document.getElementById("img1").src = "${path}/static/img/newnotes.png";
				}
			} else if(e.id == "img2")	 {
				if(img2) {
					document.getElementById("img2").src = "${path}/static/img/search2.png";
				}else {
					document.getElementById("img2").src = "${path}/static/img/search.png";
				}
			} else if(e.id == "img3")	 {
				if(img3) {
					document.getElementById("img3").src = "${path}/static/img/note2.png";
				}else {
					document.getElementById("img3").src = "${path}/static/img/note.png";
				}
			} else if(e.id == "img4")	 {
				if(img4) {
					document.getElementById("img4").src = "${path}/static/img/notebook2.png";
				}else {
					document.getElementById("img4").src = "${path}/static/img/notebook.png";
				}
			} else if(e.id == "newnotebook_a" || e.id == "newnotebook_span" || e.id == "newnotebook_img") {
				document.getElementById("newnotebook_img").src = "${path}/static/img/newnotebook.png"
			} else if(e.id == "notebookName"+selectedNid || e.id == "notebookName_span"+selectedNid || e.id == "notebookName_img"+selectedNid) {
				document.getElementById("notebookName_img"+selectedNid).src = "${path}/static/img/selected.png";
			}
		}
		function imgReset() {
			img1 = img2 = img3 = img4 = false;
			document.getElementById("img1").src = "${path}/static/img/newnotes.png";
			document.getElementById("img2").src = "${path}/static/img/search.png";
			document.getElementById("img3").src = "${path}/static/img/note.png";
			document.getElementById("img4").src = "${path}/static/img/notebook.png";
		}
		function imgOnClick() {
			var e = event.srcElement;
			imgReset();
			if(e.id == "img1") {
				img1 = true;
				document.getElementById("img1").src = "${path}/static/img/newnotes2.png";
			} else if(e.id == "img2") {
				img2 = true;
				document.getElementById("img2").src = "${path}/static/img/search2.png";
			} else if(e.id == "img3") {
				img3 = true;
				document.getElementById("img3").src = "${path}/static/img/note2.png";
				$(".notebook").hide(300);
			} else if(e.id == "img4") {
				img4 = true;
				document.getElementById("img4").src = "${path}/static/img/notebook2.png";
			}
		}
		//点击笔记事件
		var select = "";
		var isFirst = true;
		function onClick(title, Cid1, Nid) {
			var e = event.srcElement;
			
			//修改note div的class属性以改变其样式
			if(isFirst) {
				if(Cid != "" && Cid != null) {
					document.getElementById("note_id" + Cid).className = "note";
				}
				select = "note_id" + Cid1;
				document.getElementById(select).className += " selected";
				isFirst = false;
			} else {
				document.getElementById(select).className = "note";
				select = "note_id" + Cid1;
				document.getElementById(select).className += " selected";
			}
			
			$("#title_input").val(title);
			var cid = document.getElementById("Cid" + Cid1).value;
			var nid = document.getElementById("Nid" + Cid1).value;
			var uid = document.getElementById("Uid" + Cid1).value;
			//document.getElementById("right_Nid").value = nid;
			$("#right_Cid").attr("value", cid);
			$("#right_Nid").attr("value", nid);
			$("#right_Uid").attr("value", uid);
			
			document.getElementById("notebook_name").innerText = document.getElementById("notebookName_span"+nid).innerText;
			editor1.txt.clear();
			var content = html_decode(document.getElementById("content_span" + Cid1).innerText);
			editor1.txt.append('<p>' + content +'</p>');
		}
		
		//创建笔记本
		function newNotebook() {
			var name = document.getElementById("newnotebook_input").value;
        	var Uid = '${Uid}';
        	
        	var params = {
			        "Uid":Uid,
			        "name":name
			    };
			post("DoNewNotebook", params);
		}
		
		//选择笔记本
		function selectNotebook(Nid) {
			var name = document.getElementById("newnotebook_input").value;
        	var Uid = '${Uid}';
        	
        	var params = {
        			"Nid":Nid,
        			"Uid":Uid
        	}
        	post("DoSelectNotebook", params);
		}
		
		//删除笔记
		function deleteNote(Cid, Nid) {
			var Uid = '${Uid}';
			var notebookMsg = '${notebookMsg}';
			
			var params = {
					"Cid":Cid,
					"Nid":Nid,
					"Uid":Uid,
					"notebookMsg":notebookMsg
			}
			post("DoDeleteNote", params);
		}
		
		//显示所有笔记
		function toIndex() {
			if('${notebookMsg}' != "所有笔记") {
				var Uid = '${Uid}';
				
				var params = {
						"Uid":Uid,
				}
				post("ToIndex", params);
			}
		}
		
		//删除笔记本
		function delectNotebook(Nid) {
			var Uid = '${Uid}';
			var notebookMsg = '${notebookMsg}';
			var name = document.getElementById("notebookName_span"+ Nid).innerText;
			if(name == "默认") {
				$(function() {
					toastr.warning("你不能删除这个笔记本", "error"); // Wire up an event handler to a button in the toast, if it exists
	            })
			} else {
				var params = {
						"Nid":Nid,
						"Uid":Uid,
						"notebookMsg":notebookMsg
				}
				post("DoDeleteNotebook", params);
			}
		}
		//移动笔记到其他笔记本
		function changeNotebook(Nid) {
			$(".notebookOption").hide(300);
			document.getElementById("notebookName_img"+selectedNid).src = "";
			document.getElementById("notebookName_img" + Nid).src = "${path}/static/img/selected.png";
			selectedNid = Nid;
			$("#right_Nid").attr("value", Nid);
			document.getElementById("notebook_name").innerText = document.getElementById("notebookName_span"+Nid).innerText;
		}
		//搜索笔记本
		function onInput(num) {
			if(num != 3) {
				var value = document.getElementById("findNoteBook" + num).value;				
				<c:forEach items="${nlist }" var="n">
					var name = "${n.name}";
					if(num == 1) {
						if(value != "" && value != null) {
							if(name.indexOf(value) == -1) {
								$("#notebookName${n.id}").hide();
							}else {
								$("#notebookName${n.id}").show();
							}
						}else {
							$("#notebookName${n.id}").show();
						}
					} else if(num == 2) {
						if(value != "" && value != null) {
							if(name.indexOf(value) == -1) {
								$("#noteBookName${n.id}").hide();
								//document.getElementById("noteBookName${n.id}").style.display="none";
							}else {
								$("#noteBookName${n.id}").show();
							}
						}else {
							$("#noteBookName${n.id}").show();
						}
					}
				</c:forEach>
			}else {
				var noteValue = document.getElementById("findNote").value;
				<c:forEach items="${clist}" var="c">
					var content = "${c.content}";
					var title = "${c.title}";
					if(noteValue != "" && noteValue != null) {
						if(title.indexOf(noteValue) == -1 && content.indexOf(noteValue) == -1) {
							$("#note_id${c.id }").hide();
							//document.getElementById("noteBookName${n.id}").style.display="none";
						}else {
							$("#note_id${c.id }").show();
						}
					}else {
						$("#note_id${c.id }").show();
					}
				</c:forEach>
			}
			
				
				//alert("${n.id}");
			
			
		}
	</script>
	
</html>